<template>
	<view class="complet">
		<u-navbar :borderBottom="false" back-text=" " :title="title"></u-navbar>
		<scroll-view class="scroll-Y" scroll-y="true" >
			<view class="" style="padding: 32rpx; box-sizing: border-box;">
				<view v-for="(item,index) in goodsList" :key="index" class="bag_item1">
					<view class="bag_item_head">
						<u-image border-radius="8" width="112rpx" height="112rpx" :src="item.firstPic"></u-image>
						<view class="bag_item_head_right">
							<view class="bag_item_head_right">
								<view class="bag_item_head_right_overflow">
									<view class="title_dan right_title">
										单号:
									</view>
									<view class="title_code right_text">
										{{item.code}}
									</view>
								</view>
								<view class="bag_item_head_right_overflow">
									<view class="title_dan_resmask right_title">
										包裹备注:
									</view>	
									<view class="title_remark right_text">
										{{item.remark}}
									</view>
								</view>
							</view>
							<!-- <span class="right_title">单号: <span class=" right_text">{{item.code}}</span> </span>
							<span>包裹备注:<span class="right_text">{{item.remark}}</span></span> -->
						</view>
					</view>
					<view class="time">
						<span style="margin-right: 10rpx;">入库时间:</span>
						<span>{{item.add_time}}</span>
					</view>
				</view>
				
				
				
				<view class="wuPin_info">
					
					<view class="">
						<view class="form_item_title">收货信息</view>
						<div class="wupin_choose_item_info">
							<div @click="open_pop('address_pop_show')" class="wupin_choose_item">
								<span>邮寄地址</span>
								<view class="choose_item_right">
									<view class="address_width">
										
										{{choose_address.id?``:'请选择地址'}}
									</view>
									<image style="width: 24rpx; height: 24rpx;margin-left: 8rpx;"
										src="https://www.mengkahuyu.com/index_png/back.png" mode=""></image>
								</view>
								
							</div>
							<view  @click="open_pop('address_pop_show')" v-if="choose_address.id" class="">
								<view class="address_info_choose">
									{{choose_address.name}} {{choose_address.phone}}
								</view>
								<view class="address_info_choose">
									{{choose_address.province}} {{choose_address.province}} {{choose_address.area}} {{choose_address.address}}
								</view>
								<!-- {{`${choose_address.province}${choose_address.city}${choose_address.area}${choose_address.address}`}} -->
							</view>
							<div class="wupin_choose_item" style="border: none;">
								<span>备注</span>
							</div>
							<textarea  class="textareaInput" maxlength="150" cols="30"
								placeholder-class="textarea" placeholder="请输入备注" rows="5"></textarea>
						</div>
						
						<view style="width: 100%; height: 150rpx;">
				
						</view>
						<view v-if="isAdd" class="button_submit">
							<u-button @click="submitForm()" class="btns"
							:loading="!isSubmit"
								:custom-style="{'background':'#90c0ff' ,color:'#fff'}" :shape="'circle'" :hair-line="false"
								:ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)" >
								添加
							</u-button>
						</view>
					</view>
					
				</view>
			</view>
		</scroll-view>
	
		
		<!-- 邮寄地址列表 -->
		<u-popup v-model="address_pop_show" mode="bottom" border-radius="14">
			<view class="address_pop_box">
				<view class="address_pop_top">
					<view class="fahup_pop_box_title">
						选择邮寄地址
					</view>
					<view @click="toUrl('/pages/addAddresss/addAddresss')" class="addAddress">
						<image style="width: 24rpx; height: 24rpx;margin-right: 8rpx;"
							src="https://www.mengkahuyu.com/index_png/add_icon.png" mode=""></image>
						<span>添加收件人</span>
					</view>
				</view>
				<scroll-view class="scroll_y_address" scroll-y="true">
					<view class="scroll_padding">
						<view v-for="(ite,ind) in addressList" :key="ind"
							class="address_item">
							<view  @click="chooseAddress(ite ,ind)" class="address_left">

								<image v-if="ite.isChoose" style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/radio_choose.png" mode=""></image>
								<image v-else style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/radio.png" mode=""></image>
							</view>
							<view  @click="chooseAddress(ite ,ind)" class="address_center">
								<view class="centern_top">
									<span class="user_name">
										{{ite.name}}
									</span>
									<span class="user_phone">
										{{ite.phone}}
									</span>
								</view>
								<view class=" centern_top centern_center">
									{{ite.province}}
									{{ite.city}}
									{{ite.area}}
								</view>
								<view class="centern_center centern_top">
									{{ite.address}}
								</view>
							</view>
							<view @click="toUrl('/pages/addAddresss/addAddresss?id='+ite.id)" class="address_left">
								<image  style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/edit.png" mode=""></image>
							</view>

						</view>
					</view>

				</scroll-view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '直邮包裹完善',
				infoList: [],
				info: { //提交的内容

				},
				isSubmit:true,//是否可以提交
				goodsList: [], //子订单信息
				id: null,
				idArr:[],//商品id数组
				isAdd:true,//
				addressList: [], //地址列表
				choose_address:{},//选中的邮寄地址
				address_pop_show: false, //选择地址弹出层
			}
		},
		onLoad(data) {
			this.c_type = data.type //国家信息
			this.idArr = data.id.split(',')
			this.id =  data.id
			if(data.id){
				this.get_order_child(data.id)
			}
		},
		onShow() {
			this.getAddressList()
		},
		
		methods: {
			submitForm() {
				if(!this.isSubmit){
					uni.showToast({
						mask:true,
						title:'请勿重复点击',
						icon:'none'
					})
					return
				}
				
				if(!this.choose_address.id){
					uni.showToast({
						mask:true,
						title:'请选择邮寄地址',
						icon:'none'
					})
					return
				}
				var data = {
					"buy_id": this.id,
					"address_id": this.choose_address.id,
				}
				this.isSubmit = false
				this.$wqzApi.apply_for_send(data).then(res=>{
					// current
					var url = '/pages/order_other_list/order_other_list?type=1&current=5'
					uni.showToast({
						title:'申请成功',
						icon:'none',
						mask:true
					})
					
					setTimeout(()=>{
						this.isSubmit = true
						this.toUrl(url)
					} , 1200)
				}).catch(err=>{
					setTimeout(()=>{
						this.isSubmit = true
					} , 1200)
				})
			},
			get_order_child(id){
				this.$wqzApi.getorderbyid({buy_id:id}).then(res=>{
					// console.log(res.data)
					res.data.forEach((item,index)=>{
						var pic = item.pic.split(',')
						
						if(pic.length>0){
							res.data[index].firstPic = pic[0]
						}else{
							res.data[index].firstPic = ''
						}
					})
					
					this.goodsList = res.data
				})
			},
			chooseAddress(ite, ind) {
				// 选择收货地址
				this.addressList.forEach((item, index) => {
					if (ind == index) {
						this.addressList[index].isChoose = true
						this.choose_address = this.addressList[index]
						this.address_pop_show = false
					} else {
						this.addressList[index].isChoose = false
					}
				})
			},
			getAddressList() {
				// 获取地址列表
				this.$wqzApi.UserAddress_list({}).then(res => {
					res.data.list.forEach((item, index) => {
						res.data.list[index].isChoose = false
					})
					this.addressList = res.data.list
				})
			},
			open_pop(name){
				this[name] = true
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import url(./complete.scss);
</style>